<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>首页</title>
		<link rel="stylesheet" href="css/swiper.min.css">
		<link href="css/style.min.css" rel="stylesheet" type="text/css" />
		<link href="css/slide_2.1.css" rel="stylesheet" type="text/css" />
		<link rel="stylesheet" type="text/css" href="css/default.css">
		<link href="css/style2.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
		<div class="home">
			<div class="header">
				<div class="center">
					<div class="logo">
						<img src="images/logo2.png" height="56" width="137" />
					</div>
					<div class="head_nav">
						<a href="首页.html">首页</a>
						<span>|</span>
						<div class="select">
							<span>关于我们</span>
							<div class="triangle-down"></div>
						</div>
					</div>
					<div class="me hide">
						<a href="关于叮当派.html" class="active">关于我们</a>
						<a href="联系我们.html" class="">联系我们</a>
					</div>
					<div class="jxw"></div>
				</div>

			</div>
			<div class="banner section">

				<div class="bg-swiper-container">
					<div class="bg">

						<div class="demo-cont">

							<!-- slider start -->
							<div class="fnc-slider example-slider">

								<div class="fnc-slider__slides">

									<!-- slide start -->

									<div class="fnc-slide m--blend-bg1 m--active-slide">
										<div class="fnc-slide__inner">
											<div class="fnc_icon">
												<div class="fnc_icon_left">
													<div class="fnc_icon_l_top">
														<img src="images/log.png" />
														<span>叮当派</span>
														<p>你和孩子的"心"朋友</p>
													</div>
													<div class="fnc_icon_l_bot">
														<img src="images/down.png" />
														<span>下载叮当派APP</span>
													</div>
												</div>
												<div class="fnc_icon_right">
												</div>
											</div>
										</div>
									</div>
									<!-- slide end -->

									<!-- slide start -->

									<div class="fnc-slide m--blend-bg2">
										<div class="fnc-slide__inner">

										</div>
									</div>
									<!-- slide end -->

									<!-- slide start -->
									<div class="fnc-slide m--blend-bg3">
										<div class="fnc-slide__inner">

										</div>
									</div>
									<!-- slide end -->

									<!-- slide start -->
									<div class="fnc-slide m--blend-bg4">
										<div class="fnc-slide__inner">

										</div>
									</div>
									<!-- slide end -->

									<!-- slide start -->
									<div class="fnc-slide m--blend-bg5">
										<div class="fnc-slide__inner">

										</div>
									</div>

									<div class="fnc-slide m--blend-bg6">
										<div class="fnc-slide__inner">

										</div>
									</div>

									<!-- slide end -->

								</div>

								<nav class="fnc-nav">

									<div class="fnc-nav__bgs">

										<div class="fnc-nav__bg m--navbg-bg1 m--active-nav-bg"></div>
										<div class="fnc-nav__bg m--navbg-bg2"></div>
										<div class="fnc-nav__bg m--navbg-bg3"></div>
										<div class="fnc-nav__bg m--navbg-bg4"></div>
										<div class="fnc-nav__bg m--navbg-bg5"></div>
										<div class="fnc-nav__bg m--navbg-bg6"></div>

									</div>

									<div class="fnc-nav__controls">

										<button class="fnc-nav__control">
                                    
                                  </button>
										<button class="fnc-nav__control">
                                    
                                  </button>
										<button class="fnc-nav__control">
                                    
                                  </button>
										<button class="fnc-nav__control">
                                    
                                  </button>
										<button class="fnc-nav__control">
                                    
                                 </button>
										<button class="fnc-nav__control">
                                    
                                  </button>
									</div>

								</nav>

							</div>
							<!-- slider end -->

						</div>

					</div>

				</div>

			</div>

			<div class="continer">
				<div class="content">
					<div class="title">
						<span>父母在什么场景找叮当派</span>
					</div>
					<div class="title_explain">
						<span>来自派友的亲身自述，我们用妈妈们的口碑精选给孩子最好的教育内容！</span>
					</div>
					<div class="cnt_scene">
						<div class="cnt_scene_row">
							<div class="cnt_scene_line">
								<a href="#" class="scene_title scene1">
									午后
								</a>
								<span class="scene_theme">找个适合孩子听的</span>
								<span class="scene_info">"草地音乐会"</span>
							</div>
							<div class="cnt_scene_line">
								<a href="#" class="scene_title scene2">
									周末
								</a>
								<span class="scene_theme">为孩子找个令人着迷的</span>
								<span class="scene_info">全球剧目</span>
							</div>
							<div class="cnt_scene_line">
								<a href="#" class="scene_title scene3">
									早餐
								</a>
								<span class="scene_theme">和孩子一起听有趣的</span>
								<span class="scene_info">中国历史趣说</span>
							</div>
							<div class="cnt_scene_line">
								<a href="#" class="scene_title scene4">
									放学
								</a>
								<span class="scene_theme">和孩子一起听博物馆</span>
								<span class="scene_info">最有趣的"怪物"</span>
							</div>
						</div>
						<div class="cnt_scene_row">
							<div class="cnt_scene_line">
								<a href="#" class="scene_title scene5">
									睡前
								</a>
								<span class="scene_theme">和孩子一起感动的读</span>
								<span class="scene_info">全球最美的诗歌</span>
							</div>
							<div class="cnt_scene_line">
								<a href="#" class="scene_title scene6">
									美术馆
								</a>
								<span class="scene_theme">让孩子饶有兴趣的</span>
								<span class="scene_info">认识"当代艺术"</span>
							</div>
							<div class="cnt_scene_line">
								<a href="#" class="scene_title scene7">
									博物馆
								</a>
								<span class="scene_theme">让孩子做"勇敢探险者"</span>
								<span class="scene_info">发现藏品的秘密</span>
							</div>
							<div class="cnt_scene_line">
								<a href="#" class="scene_title scene8">
									音乐厅
								</a>
								<span class="scene_theme">和孩子穿越欧洲宫廷</span>
								<span class="scene_info">听懂"莫扎特"</span>
							</div>
						</div>

					</div>
					<div class="title">
						扫描二维码，下载关注叮当派
					</div>
				</div>

			</div>
			<div class="cnt_download">
					<a class="app_icon appCode">
					</a>
					<a class="app_icon wechatCode">
					</a>
			</div>   
			<div class="footer">
				<div class="linka">
					<a href="关于叮当派.html">关于叮当派</a>
					<a href="品牌起源.html">品牌起源</a>
					<a href="联系我们.html">联系我们</a>
				</div>
				<div class="line"></div>
				<div class="copy">Copyright © 叮当派（DINGDANGPAI） 2015-2016 沪ICP备15004023号</div>
			</div>
			<div class="fixed">
				<div>新!</div>
				<img  class="f_code" src="images/f_code.png"/>
				<div class="f_font">叮当派手机版下载</div>
				<div id="close" class="close"></div>
			</div>
			<div class="goTop">
				<img class="go_top" src="images/go_top.png"/>
				<div class="f_font">返回顶部</div>
			</div>
		</div>

	</body>
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script src='js/stopExecutionOnTimeout.js?t=1'></script>
	<script>
		(function() {
			var $$ = function(selector, context) {
				var context = context || document;
				var elements = context.querySelectorAll(selector);
				return [].slice.call(elements);
			};

			function _fncSliderInit($slider, options) {
				var prefix = '.fnc-';
				var $slider = $slider;
				var $slidesCont = $slider.querySelector(prefix + 'slider__slides');
				var $slides = $$(prefix + 'slide', $slider);
				var $controls = $$(prefix + 'nav__control', $slider);
				var $controlsBgs = $$(prefix + 'nav__bg', $slider);
				var $progressAS = $$(prefix + 'nav__control-progress', $slider);
				var numOfSlides = $slides.length;
				var curSlide = 1;
				var sliding = false;
				var slidingAT = +parseFloat(getComputedStyle($slidesCont)['transition-duration']) * 1000;
				var slidingDelay = +parseFloat(getComputedStyle($slidesCont)['transition-delay']) * 1000;
				var autoSlidingActive = false;
				var autoSlidingTO;
				var autoSlidingDelay = 5000;
				var autoSlidingBlocked = false;
				var $activeSlide;
				var $activeControlsBg;
				var $prevControl;

				function setIDs() {
					$slides.forEach(function($slide, index) {
						$slide.classList.add('fnc-slide-' + (index + 1));
					});
					$controls.forEach(function($control, index) {
						$control.setAttribute('data-slide', index + 1);
						$control.classList.add('fnc-nav__control-' + (index + 1));
					});
					$controlsBgs.forEach(function($bg, index) {
						$bg.classList.add('fnc-nav__bg-' + (index + 1));
					});
				};
				setIDs();

				function afterSlidingHandler() {
					$slider.querySelector('.m--previous-slide').classList.remove('m--active-slide', 'm--previous-slide');
					$slider.querySelector('.m--previous-nav-bg').classList.remove('m--active-nav-bg', 'm--previous-nav-bg');
					$activeSlide.classList.remove('m--before-sliding');
					$activeControlsBg.classList.remove('m--nav-bg-before');
					$prevControl.classList.remove('m--prev-control');
					$prevControl.classList.add('m--reset-progress');
					var triggerLayout = $prevControl.offsetTop;
					$prevControl.classList.remove('m--reset-progress');
					sliding = false;
					var layoutTrigger = $slider.offsetTop;
					if(autoSlidingActive && !autoSlidingBlocked) {
						setAutoslidingTO();
					}
				};

				function performSliding(slideID) {
					if(sliding)
						return;
					sliding = true;
					window.clearTimeout(autoSlidingTO);
					curSlide = slideID;
					$prevControl = $slider.querySelector('.m--active-control');
					$prevControl.classList.remove('m--active-control');
					$prevControl.classList.add('m--prev-control');
					$slider.querySelector(prefix + 'nav__control-' + slideID).classList.add('m--active-control');
					$activeSlide = $slider.querySelector(prefix + 'slide-' + slideID);
					$activeControlsBg = $slider.querySelector(prefix + 'nav__bg-' + slideID);
					$slider.querySelector('.m--active-slide').classList.add('m--previous-slide');
					$slider.querySelector('.m--active-nav-bg').classList.add('m--previous-nav-bg');
					$activeSlide.classList.add('m--before-sliding');
					$activeControlsBg.classList.add('m--nav-bg-before');
					var layoutTrigger = $activeSlide.offsetTop;
					$activeSlide.classList.add('m--active-slide');
					$activeControlsBg.classList.add('m--active-nav-bg');
					setTimeout(afterSlidingHandler, slidingAT + slidingDelay);
				};

				function controlClickHandler() {
					if(sliding)
						return;
					if(this.classList.contains('m--active-control'))
						return;
					if(options.blockASafterClick) {
						autoSlidingBlocked = true;
						$slider.classList.add('m--autosliding-blocked');
					}
					var slideID = +this.getAttribute('data-slide');
					performSliding(slideID);
				};
				$controls.forEach(function($control) {
					$control.addEventListener('click', controlClickHandler);
				});

				function setAutoslidingTO() {
					window.clearTimeout(autoSlidingTO);
					var delay = +options.autoSlidingDelay || autoSlidingDelay;
					curSlide++;
					if(curSlide > numOfSlides)
						curSlide = 1;
					autoSlidingTO = setTimeout(function() {
						performSliding(curSlide);
					}, delay);
				};
				if(options.autoSliding || +options.autoSlidingDelay > 0) {
					if(options.autoSliding === false)
						return;
					autoSlidingActive = true;
					setAutoslidingTO();
					$slider.classList.add('m--with-autosliding');
					var triggerLayout = $slider.offsetTop;
					var delay = +options.autoSlidingDelay || autoSlidingDelay;
					delay += slidingDelay + slidingAT;
					$progressAS.forEach(function($progress) {
						$progress.style.transition = 'transform ' + delay / 3000 + 's';
					});
				}
				$slider.querySelector('.fnc-nav__control:first-child').classList.add('m--active-control');
			};
			var fncSlider = function(sliderSelector, options) {
				var $sliders = $$(sliderSelector);
				$sliders.forEach(function($slider) {
					_fncSliderInit($slider, options);
				});
			};
			window.fncSlider = fncSlider;
		}());
		fncSlider('.example-slider', {
			autoSlidingDelay: 5000
		});
		var $demoCont = document.querySelector('.demo-cont');
		[].slice.call(document.querySelectorAll('.fnc-slide__action-btn')).forEach(function($btn) {
			$btn.addEventListener('click', function() {
				$demoCont.classList.toggle('credits-active');
			});
		});
		document.querySelector('.demo-cont__credits-close').addEventListener('click', function() {
			$demoCont.classList.remove('credits-active');
		});
		document.querySelector('.js-activate-global-blending').addEventListener('click', function() {
			document.querySelector('.example-slider').classList.toggle('m--global-blending-active');
		});
	</script>

</html>